<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- <link rel="stylesheet" href="css/style.css"> -->

    <style>
        *{ margin: 0; padding: 0; }
        ul{ list-style: none; }
        a{ text-decoration: none; }

        #warpper{ width: 800px; height: 600px; margin: 20px auto;}
        .container{ width: 100%; height: 100%; overflow: hidden; position: relative; }

        .imgList{ width: 4800px; position: absolute; z-index: 5; }
        .imgList>li{ float: left; width: 800px; height: 600px; }
        .imgList>li>img{ width: 100%; height: 100%; }

        .pre,.next{ position: absolute; top: 275px; background: rgba(220,220,220,0.7); padding: 10px 0; z-index: 100; opacity: 0.6; filter: alpha(opacity=60); }
        .pre:hover,.next:hover{ cursor: pointer; opacity: 1; filter: alpha(opacity=100); }
        .pre{ left: 10px; }
        .next{ right: 10px; }

        .dollList{ width:180px;  position: absolute; z-index: 10; bottom: 20px; left: 310px ; }
        .dollList li{ float: left; margin-right: 10px; }
        .dollList li.sec a{ background: orange; }
        .dollList li a{ width: 15px; height: 15px; background: rgba(230,230,230,0.6); border-radius: 50%; display: inline-block;  }
</style>

<script>
    $(function(){
        //设置全局变量
        var cur = 0;    //当前的图片序号
            imgLen = $(".imgList li").length;  //获取图片的数量
            timer = null;   //设置定时定时器的名字，方便后面关闭

        //当鼠标移到向左和向右的图标上关闭定时器，离开时则重置定时器
        $(".pre,.next").hover(function(){
            clearInterval( timer );
        },function(){
            changeImg( );
        });

        //当鼠标移到图片上关闭定时器，离开时则重置定时器
        $(".imgList").hover(function(){
            clearInterval( timer );
        },function(){
            changeImg( );
        });

        //点击向左图标根据cur进行上一个图片处理
        $(".pre").click(function(){
            cur = cur>0 ? (--cur) : (imgLen-1);
            changeTo( cur );
        });

        //点击向右图标根据cur进行上一个图片处理
        $(".next").click(function(){
            cur = cur<( imgLen-1 ) ? (++cur) : 0;
            changeTo( cur );
        });

        //为下方的圆点按钮绑定事件
        $(".dollList li").hover(function(){
            clearInterval(timer);
            var index = $(this).index();
            cur = index
            changeTo(cur);
        },function(){
            changeImg();
        });

        //封装图片自动播放函数
        function changeImg(){

            timer = setInterval(function(){
                if( cur<imgLen-1 ){
                    cur++;
                }else{
                    cur=0;
                }
                changeTo( cur );
            },2000);        
        }

        //调用函数
        changeImg();

        //图片切换函数
        function changeTo( num ){
            var go = num*800;
            $(".imgList").animate({ "left" : -go },500);
            $(".dollList").find("li").removeClass("sec").eq(num).addClass("sec");

        }

    });
</script>
</head>
<body>
    <div id="warpper">
        <div class="container">
            <!-- 图片区域 -->
            <ul class="imgList">
                <li><img src="img/timg (1).jpg" alt=""></li>
                <li><img src="img/timg (2).jpg" alt=""></li>
                <li><img src="img/timg.jpg" alt=""></li>
                <li><img src="img/u=2876202127,3733966213&fm=26&gp=0.jpg" alt=""></li>
                <li><img src="img/timg (3).jpg" alt=""></li>
                <li><img src="img/timg (4).jpg" alt=""></li>
            </ul>
            <!-- 左右切换图标 -->
            <img src="img/timg (5).jpg" width="40px" height="60px" class="pre">
            <img src="img/timg (5).jpg" width="40px" height="60px" class="next">
            <!-- 下方控制图片按钮 -->       
            <ul class="dollList">
                <li class="sec"><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
            </ul>
        </div> 
    </div>
</body>
</html>